<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>erp进销存系统</title>
	<link rel="stylesheet" href="../../static/css/style.css" th:href="@{http://localhost:8080/css/style.css}">
	<link rel="stylesheet" href="../../static/layui/css/layui.css"
		  th:href="@{http://localhost:8080/layui/css/layui.css}">
	<script src="../../static/layui/layui.js" th:src="@{http://localhost:8080/layui/layui.js}"></script>
	<script src="../../static/js/jquery.js"
			th:src="@{http://localhost:8080/webjars/jquery/3.6.0/jquery.min.js}"></script>

	<script src="../../static/js/man/out_storage.js" th:src="@{http://localhost:8080/js/man/out_storage.js}"></script>
	<link rel="stylesheet" href="../../static/css/man/out_storage.css"
		  th:href="@{http://localhost:8080/css/man/out_storage.css}">
</head>
<body>
	<p style=" color:green; position: absolute;z-index: 1000; margin:-100px 0 0 120px;">欢迎您, <span id="manager" th:text="${session.manager.realName}"></span></p>
	<div>
		<h3 style="font-size: 25px;">出库信息</h3>
		<!--添加及删除按钮-->
		<div class="layui-inline">
			<button class="layui-btn-lg layui-bg-blue " id="storage_btn_add" type="button">添加产品</button>
			<button class="layui-btn-lg layui-bg-red " id="storage_btn_del" type="button">删除选中</button>
		</div>


		<div id="out_storage_data">
			<datalist id="out_storage_data_company" style="width: 500px;">
				<option th:each="company : ${companies}"  th:value="${company}"></option>
			</datalist>
			<datalist id="out_storage_data_location" style="width: 500px;">
				<option value="地址1"></option>
				<option value="地址2"></option>
				<option value="地址3"></option>
			</datalist>
			<datalist id="out_storage_data_contact">
				<option value="联系人1"></option>
				<option value="联系人2"></option>
				<option value="联系人3"></option>
			</datalist>
			<datalist id="out_storage_data_telephone">

				<option value="电话1"></option>
				<option value="电话2"></option>
				<option value="电话3"></option>
			</datalist>
			<datalist id="out_storage_data_storage_company">
				<option th:each="variety :${varieties}"  th:value="${variety}"></option>
				<!--/*-->
				<option value="产品1"></option>
				<option value="产品2"></option>
				<option value="产品3"></option>
				<!--*/-->
			</datalist>
			<datalist id="out_storage_data_storage_type">
				<option value="型号1"></option>
				<option value="型号2"></option>
				<option value="型号3"></option>
			</datalist>
			<datalist id="out_storage_data_storage_standard">
				<option value="规格1"></option>
				<option value="规格2"></option>
				<option value="规格3"></option>
			</datalist>
		</div>
		<hr>

		<h4 style="font-size: 20px;">出库编号: <span id="out_storage_id"></span></h4>
		<hr>
		<div id="out_storage_ipt">
			<input type="text" class="out_storage_ipts" id="out_storage_company" list="out_storage_data_company" placeholder="请选择或输入购买单位">
			<input type="text" class="out_storage_ipts" id="out_storage_location" list="out_storage_data_location" placeholder="请选择或输入地址">
			<input type="text" class="out_storage_ipts" id="out_storage_contact" list="out_storage_data_contact" placeholder="请选择或输入联系人">
			<input type="text" class="out_storage_ipts" id="out_storage_telephone" list="out_storage_data_telephone" placeholder="请选择或输入电话">
		</div>
		<hr>
		<form action="out_storage_add" id="out_storage_form">

			<div id="out_storage_table_div">
				<table id="out_storage_table" class="layui-table" lay-filter="out_table" style="text-align: center;">
					<tr>
						<th><button style="width: 70px;" id="out_storage_checkbox">全选/反选</button></th>
						<th>产品名称</th>
						<th>型号</th>
						<th>规格</th>
						<th>单位</th>
						<th>数量</th>
						<th>单价</th>
						<th>金额</th>
					</tr>
					<tr id="out_storage_tr">
						<td >
							<label style="border: 1px dotted lightgray;  padding:13px 10px 5px 10px ;"><input style="width: 20px; height: 20px;" type="checkbox"></label></td>
						<td><input name="varietyName" class="out_storage_ipts out_storage_company" type="text" style="width: 80%" list="out_storage_data_storage_company"></td>
						<td><input name="typeName" class="out_storage_ipts out_storage_type" type="text" style="width: 90%" list="out_storage_data_storage_type"></td>
						<td>
							<input name="standardName" class="out_storage_ipts out_storage_standard" type="text" style="width: 70%" list="out_storage_data_storage_standard">
							<input type="hidden" name="storageId" class=".out_storage_id1" >
						</td>
						<td><input name="units" class="out_storage_ipts" style="width: 30%" type="text"></td>
						<td>
							<button type="button" class="out_storage_sub">&nbsp;-&nbsp;</button>
							<input name="count" class="out_storage_ipts out_storage_count" style="width:50%" type="text" placeholder="库存20">
							<button type="button" class="out_storage_sum">&nbsp;+&nbsp;</button> </td>
						<td>
							<input  name="price" class="out_storage_ipts out_storage_price" style="width:50%" type="text" placeholder="输入单价">
						</td>
						<td>
							<input name="money" class="out_storage_ipts out_storage_result" style="width:50%" type="text" placeholder="自动计算">
						</td>
					</tr>
				</table>
			</div>

			<hr>


		</form>
		<datalist id="out_storage_pay">
			<option value="月结"></option>
			<option value="款到发货"></option>
			<option value="按合同执行"></option>
		</datalist>

		<input type="text" name="payCondition" id="out_storage_payCondition" class="out_storage_ipts"  placeholder="请选择或手工备注付款条件" list="out_storage_pay">

		<input type="text" name="transport" id="out_storage_transport" class="out_storage_ipts" placeholder="请输入运输方式">

		<div >
			<input type="submit" class="layui-btn " id="out_storage_submit" value="添加出库单">
		</div>
	</div>

	<script>



		$("#out_storage_company,#out_storage_location,#out_storage_contact,#out_storage_telephone").on("focus", function () {
			$(this).val("");
		})
		/**
		 * 通过ajax实现获取上级的内容,通过上级的内容查询本级的列表.
		 * @param iptObj	jQuery的input输入框ID
		 * @param dataObj	jQuery的dataList列表ID
		 * @param reqUri	请求后台的地址
		 */
		function  getDataList(iptObj,dataObj,reqUri){
			var param = iptObj.val();
			$.post(reqUri,{param:param},function (data){
				dataObj.empty();
				for (let i in data) {
					var item = data[i];
					dataObj.append("<option value='"+item+"'></option>")
				}
			})
		}

		$("#out_storage_contact").on("blur",function (){
			getDataList($(this),$("#out_storage_data_telephone"),"/outStorage/getTelephones")
		})

		$("#out_storage_location").on("blur",function (){
			getDataList($(this),$("#out_storage_data_contact"),"/outStorage/getContactNames")
		})

		$("#out_storage_company").on("blur",function (){
			getDataList($(this),$("#out_storage_data_location"),"/outStorage/getLocationNames");
		})
	</script>
</body>
</html>